import React from 'react';
import { Button,Checkbox, Row,Col,Select,Form, Input,Table,Tag,Switch } from 'antd';
import './addpay.scss'
import * as service from '../../../../../api/tzp'
import { useNavigate } from 'react-router-dom';
function Addpay(props:any) {
    var [form] = Form.useForm()
    var navigate = useNavigate()
    var onFinish = async (formvalues: any) => {
        console.log(formvalues);
        console.log(formvalues.duration.street+formvalues.duration.province );
        var time = new Date()
        var res = await service.pay_add({vipname:formvalues.vipname,duration:formvalues.duration.street+formvalues.duration.province ,current:formvalues.current,privilege:formvalues.privilege[0],flag:1,lasttime:time})
        console.log(res);
        navigate('/index/payvip')
    }
    const { TextArea } = Input;
    return (
        <div className='addpay'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 编辑付费会员卡信息</div>
                <div className='title-bottom'>编辑付费会员卡</div>
            </div>
            <div className="addpay-list">

                <Form
                    form={form}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="会员卡名称"
                        name="vipname"
                    >
                        <Select
                            placeholder="请选择---"
                            style={{ width: 255 }}
                            options={[
                                { value: '月度会员', label: '月度会员' },
                                { value: '季度会员', label: '季度会员' },
                                { value: '半年会员', label: '半年会员' },
                                { value: '年度大会员', label: '年度大会员' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="开卡条件"
                        name="current"
                        style={{ width: 460 }}
                    >
                        <Input placeholder='请输入金额（元）' />
                    </Form.Item>
                    <Form.Item label="有效期">
                        <Input.Group compact>
                            <Form.Item
                            name={['duration', 'street']}
                            >
                            <Input style={{ width:200 }} placeholder="输入时间" />
                            </Form.Item>
                            <Form.Item
                            name={['duration', 'province']}
                            >
                            <Select placeholder="请选择" 
                                options={[
                                    { value: '月', label: '月' },
                                    { value: '年', label: '年' },
                                ]}
                            />
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>

                    <Form.Item  label="续卡提醒" style={{marginTop:'-30px'}}>
                        <Checkbox.Group style={{ width: '100%' }}
                        >
                            <Row>
                                <Col span={20} style={{marginBottom:10 ,marginTop:5}}>
                                    <Checkbox value="不提醒">不提醒</Checkbox>
                                </Col>
                                <Col span={20} style={{marginBottom:10}}>
                                    <Checkbox value="距离到期前">距离到期前</Checkbox>
                                    <Select
                                        placeholder="请选择时长"
                                        style={{ width: 150 }}
                                        options={[
                                            { value: '今天', label: '今天' },
                                            { value: '最近15天', label: '最近15天' },
                                            { value: '最近30天', label: '最近30天' },
                                        ]}
                                     />
                                     &nbsp;&nbsp;提醒
                                </Col>
                                
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item name="privilege" label="会员权益" style={{marginTop:'-10px'}}>
                        <Checkbox.Group style={{ width: '100%' }}
                        >
                            <Row>
                                <Col span={20} style={{marginBottom:10 ,marginTop:5}}>
                                    <Checkbox value="所有全部课程免费">所有全部课程免费</Checkbox>
                                </Col>
                                <Col span={20} style={{marginBottom:10}}>
                                    <Checkbox value="商品折扣">商品折扣</Checkbox>
                                </Col>
                                <Col span={20} style={{marginBottom:10}}>
                                    <Checkbox value="积分翻倍">积分翻倍</Checkbox>
                                </Col>
                                <Col span={20} style={{marginBottom:10}}>
                                    <Checkbox value="八折优惠券">八折优惠券</Checkbox>
                                </Col>
                                
                            </Row>
                        </Checkbox.Group>
                    </Form.Item>
                    <Form.Item
                        label="卡描述"
                    >
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item  >
                        <Button htmlType="submit">提交</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Addpay;